<template>
    <div id="notificationMessage">
        <div>
            <van-nav-bar title="通知消息" style="background-color: rgba(234, 233, 229);font-size: 30px;" left-arrow  @click-left="onClickLeft">
            <template #right>
                <van-icon name="setting-o" size="18" @click="tZ"/>
            </template>
            </van-nav-bar>
        </div>
        <div id="notificationMessage2" v-for="item in wuLiuData" :key="item.id">
            <div style="height:100%">
                <div style="height:20%;line-height: 22px;">
                    <span style="font-weight: bolder;font-size: 19px;">{{item.minc}}</span>
                    <span style="float:right">{{item.shijian}}</span>
                </div>
                <div style="height:80%;background-color: rgba(242, 242, 242);margin-top: 10px;border-radius: 8px;display: flex;">
                    <div style="width:25%">
                        <img :src="item.img" alt="" style="width:100%;height: 100%;border-radius: 8px 0 0 8px;">
                    </div>
                    <div style="width:75%;padding:10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        <span style="display:block">{{item.miaos}}</span>
                        <span style="display:block">{{item.minc}}</span>
                        <span style="display:block;margin-top: 10px;">{{item.dianhua}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search">分类</van-tabbar-item>
            <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
            <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>
        <div v-if="wuLiuData==''">
            <van-overlay :show="true">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading size="24px" vertical>加载中...</van-loading>
                </div>
            </div>
            </van-overlay>
        </div>
    </div>
</template>
<script setup lang="ts">
    import {onMounted, ref} from 'vue'
    import {getWuLiu} from '@/api/text'
    import { useRouter,useRoute } from "vue-router";
    const route = useRoute()
    const router = useRouter()
    let tZ = ()=>{
        router.push({path:'/informManagement'})
    }
    onMounted(()=>{
        getWuLiu().then(data=>{
            wuLiuData.value = data.data.data
        })
    })
    let onClickLeft = ()=>{
        history.back();
    }
    let wuLiuData:any = ref([])
    let active = ref(2);
</script>
<style scoped>
    #notificationMessage {
        width: 100%;
        height: 850px;
        margin: 0;
        background-color: rgba(234, 233, 229);
    }
    #notificationMessage2 {
        width: 90%;
        height: 150px;
        background-color: rgba(255, 255, 255);
        border-radius: 10px;
        left: 0;
        right: 0;
        /* top: 20px; */
        margin: auto;
        margin-top: 20px;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .block {
        width: 120px;
        height: 120px;
        box-sizing: border-box;
        background-color: #fff;
        padding: 30px;
    }
</style>